{extend name='admin@public/content'}

{block name='content'}
<form onsubmit="return false;" action="" data-auto="true" method="post" class='form-horizontal layui-form'
      style='padding-top:20px'>

    <input type="hidden" name="id" value="{$vo.id}">
    <div class="row">
        {if empty($vo['content'])}
        <div class="item">
            <div class="form-group">
                <label class="col-sm-2 control-label">
                    <button class="layui-btn layui-btn-sm layui-btn-danger del" type="button">删除</button>
                    小标题：<span class="nowrap"></span>
                </label>
                <div class='col-sm-8'>
                    <input type="text" name="content[0][title]" title="请输入" placeholder="请输入标题" value=""
                           class="layui-input">
                    <p class="help-block">如‘乡野运动会’</p>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">内容：<span class="nowrap"></span></label>
                <div class='col-sm-8'>
                    <textarea name="content[0][content]" required placeholder="请输入" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
        {else}
        {foreach $vo.content as $k=>$v}
        <div class="item">
            <div class="form-group">
                <label class="col-sm-2 control-label">
                    <button class="layui-btn layui-btn-sm layui-btn-danger del" type="button">删除</button>
                    小标题：<span class="nowrap"></span>
                </label>
                <div class='col-sm-8'>
                    <input type="text" name="content[{$k}][title]" title="请输入" placeholder="请输入标题"
                           value="{$v.title ?: ''}" class="layui-input">
                    <p class="help-block">如‘乡野运动会’</p>
                </div>

            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">内容：<span class="nowrap"></span></label>
                <div class='col-sm-8'>
                    <textarea name="content[{$k}][content]" required placeholder="请输入" class="layui-textarea">{$v.content ?: ''}</textarea>
                </div>
            </div>
        </div>
        {/foreach}
    {/if}
    </div>

    <div class="hr-line-dashed"></div>

    <div class="col-sm-8 col-sm-offset-2">
        <div class="layui-form-item text-left">
            <button class="layui-btn layui-btn-normal add" type="button">添加</button>
            <button class="layui-btn" type="submit">保存</button>
        </div>
    </div>
</form>

{/block}
{block name="script"}
<script>
    window.form.render();
    //富文本
    require(['ckeditor'], function () {
        // window.createEditor('[name="content[0][content]"]', {height: 400});
        $('textarea').each(function () {
            window.createEditor($(this),{height:400})
        })
    })
    var key;
    $(function () {
        key = $('.item').length - 1;
    });
    $('.add').on('click', function () {
        key++;
        var html_str = `    <div class="hr-line-dashed"></div>
<div class="item">
            <div class="form-group">
                <label class="col-sm-2 control-label">
                    <button class="layui-btn layui-btn-sm layui-btn-danger del" type="button">删除</button>
                    小标题：<span class="nowrap"></span>
                </label>
                <div class='col-sm-8'>
                    <input type="text" name="content[${key}][title]" title="请输入" placeholder="请输入标题" value=""
                           class="layui-input">
                    <p class="help-block">如‘乡野运动会’</p>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">内容：<span class="nowrap"></span></label>
                <div class='col-sm-8'>
                    <textarea name="content[${key}][content]" id="${key}" required placeholder="请输入" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>`;
        $('.row').append(html_str).hide().show();
        createEditor('#'+key,{height:400});
    })
    $('.row').on('click','.del',function () {
        $(this).parents('.item').remove();
    })
</script>
{/block}